<template>
  <div class="device-status">
    <el-tag :type="statusType" size="small">{{ statusText }}</el-tag>
    <el-progress 
      :percentage="percentage" 
      :color="progressColor"
      :show-text="false"
      :stroke-width="6"
      class="capacity-progress"
    />
    <span class="capacity-text">{{ percentage }}%</span>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  status: 'online' | 'offline' | 'full' | 'error' | 'maintenance'
  capacity?: number
  maxCapacity?: number
}

const props = withDefaults(defineProps<Props>(), {
  capacity: 0,
  maxCapacity: 100
})

const percentage = computed(() => {
  return Math.round((props.capacity / props.maxCapacity) * 100)
})

const statusType = computed(() => {
  switch (props.status) {
    case 'online':
      return 'success'
    case 'offline':
      return 'info'
    case 'full':
      return 'warning'
    case 'error':
      return 'danger'
    case 'maintenance':
      return 'warning'
    default:
      return 'info'
  }
})

const statusText = computed(() => {
  switch (props.status) {
    case 'online':
      return '在线'
    case 'offline':
      return '离线'
    case 'full':
      return '已满'
    case 'error':
      return '故障'
    case 'maintenance':
      return '维护中'
    default:
      return '未知'
  }
})

const progressColor = computed(() => {
  const percent = percentage.value
  if (percent >= 90) return '#F56C6C'
  if (percent >= 70) return '#E6A23C'
  return '#67C23A'
})
</script>

<style lang="scss" scoped>
.device-status {
  display: flex;
  align-items: center;
  gap: 8px;

  .capacity-progress {
    flex: 1;
    min-width: 80px;
  }

  .capacity-text {
    font-size: 12px;
    color: #606266;
    min-width: 30px;
    text-align: right;
  }
}
</style>